<template>
    <!-- 分类页主体 -->
    <div class="cat-main-box">
        <div class="cat-main-hd">
            <img class="cat-banner" v-if="catBanner" :src="catBanner" alt="catName">
        </div>       
        <h3 class="cat-main-title">{{catName}}</h3>
        <div class="cat-main-bd">
            <ul class="cat-goods">

                <router-link class="goods-item" :to="'/product/' + item.id" v-for="item in catProducts" :key="item.id" tag="li">
                    <!-- 商品图 -->
                    <div class="goods-view">
                        <img class="goods-pic" :src="item.picUrl" :alt="item.name">
                    </div>
                    <!-- 商品信息 -->
                    <div class="goods-infos">
                        <p class="goods-name">{{item.name}}</p>
                        <p class="goods-price">
                            <span class="price-new">¥{{item.memberPrice}}<em>.00</em></span>
                            <span class="price-old">¥{{item.integration}}</span>
                        </p>
                        <p class="goods-sales">已售：{{item.salesVolume}}件</p>
                    </div>
                    <!-- 购买商品 -->
                    <div class="goods-cart iconfont">&#xe628;</div>
                </router-link>

            </ul>
        </div>
    </div>
</template>

<script>

export default {
    name: 'CatMain',
    props: ['catBanner','catName','catProducts']
}
	
</script>

<style lang="less" scoped>
// 分类页主体
.cat-main-box{
    flex: 1;
    background-color: #ffffff;   
    overflow-y: scroll;
    .cat-main-hd{
        overflow: hidden;
        padding: .1rem;
        .cat-banner{
            display: block;
            width: 100%;
        }
    }
    .cat-main-title{
        padding: .2rem .1rem;
    }   
    .cat-main-bd{
        overflow: hidden;
        .goods-item{
            overflow: hidden;
            position: relative;
            display: flex;
            margin-bottom: .2rem;
            .goods-view{
                overflow: hidden;
                flex: 0 0 2.2rem;
                padding: 0 .1rem;
                .goods-pic{
                    display: block;
                    width: 2rem;
                }
            }
            .goods-infos{
                overflow: hidden;
                flex: 1;
                padding-right: .1rem;
                font-size: .24rem;
                .goods-name{
                    overflow: hidden;
                    display: box;
                    display: -webkit-box;
                    line-clamp: 2;
                    -webkit-line-clamp: 2;
                    box-orient: vertical;
                    -webkit-box-orient: vertical;
                    width: 100%;
                    height: .72rem;
                    line-height: .36rem;
                    word-break: break-all;
                    text-overflow: ellipsis;
                }
                .goods-price{
                    margin-top: .4rem;
                }
                .price-new{
                    font-size: .28rem;
                    color: #f23030;
                    em{
                        font-style: normal;
                        font-size: .2rem;
                    }
                }
                .price-old{
                    text-decoration: line-through;
                }
                .goods-sales{
                    margin-top: .2rem;
                }
            }
            .goods-cart{
                position: absolute;
                right: .1rem;
                bottom: .1rem;
                color: #f23030;
                font-size: .6rem;
            }
        }
    } 
}	
</style>